<template>
  <div>
    <el-card>
      <div slot="header">
        <div class="card-header">
          <el-page-header @back="back">
            <template>
              <div slot="content">
                <div class="out">
                  <p>优惠券管理</p>
                  <el-button type="primary" icon="el-icon-plus" @click="add"
                    >添加</el-button
                  >
                </div>
              </div>
            </template>
          </el-page-header>
        </div>
      </div>
      <div>
        <el-table
          @cell-mouse-enter="cellComing"
          @cell-mouse-leave="cellLeave"
          :data="final_tableData"
          style="width: 100%"
        >
          <el-table-column prop="id" label="编号" width="width" align="center">
          </el-table-column>

          <el-table-column
            prop="couponname"
            label="名称"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="startDate"
            label="使用日期"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="endDate"
            label="终止日期"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column header-align="center">
            <template slot="header" mini slot-scope="scope">
              <div class="table-header">
                <el-input v-model="search" placeholder="输入编号/名称/搜索" />
              </div>
            </template>
            <template slot-scope="scope">
              <div class="icon-group" v-if="scope.row.showIcons">
                <i class="el-icon-setting icon" @click="setting(scope.row)"></i>
                <i
                  class="el-icon-circle-close icon"
                  @click="del_coupon(scope.row)"
                ></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from "moment";
import { mapState } from "vuex";
import m_axios from "../assets/m_axios";
export default {
  watch: {
    current_property_index: {
      immediate: true,
      handler: function () {
        this.init_coupon_info();
      },
    },
  },
  computed: {
    ...mapState(["current_property_index"]),
    final_tableData() {
      return this.tableData.filter((item) =>
        this.search == ""
          ? true
          : item.id == this.search || item.couponname.startsWith(this.search)
      );
    },
  },
  methods: {
    setting(row) {
      this.$router.push({
        name: `coupon-add`,
        params: {
          isUpdate: true,
          allInfo: row,
        },
      });
    },
    del_coupon(row) {
      let url = "http://47.99.124.245:8082/deletecoupon";
      let params = {
        couponindex: row.id,
      };
      m_axios.deleteItem
        .bind(this)(url, params)
        .then((res) => {
          if (res == 200) {
            let index = this.tableData.indexOf(
              this.tableData.find((x) => x.id == row.id)
            );
            this.tableData.splice(index, 1);
          }
        });
    },

    init_coupon_info: function () {
      let propertyindex = this.current_property_index;
      let params = {
        propertyindex: propertyindex,
      };
      m_axios.getInitialItems
        .bind(this)("get", "http://47.99.124.245:8082/getCoupon", params)
        .then((res) => {
          if (res.data.code == 200) {
            let data = res.data.data;
            console.log(data);
            if (data.length > 0) {
              this.tableData.splice(0, this.tableData.length);
              for (let i of data) {
                i.id = i.couponid;
                i.type = i.price && i.price > 0 ? "有价券" : "免费券";
                i.startDate = i.createtime;
                i.endDate = i.finishtime;
                i.showIcons = false;
                this.tableData.push(i);
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    add() {
      this.$router.push("coupon-add");
    },
    back() {
      this.$router.go(-1);
    },
    cellLeave(row, column, cell, event) {
      let id = row.id;
      for (let i of this.tableData) {
        if (i.id == id) {
          i.showIcons = false;
        }
      }
    },
    cellComing(row, column, cell, event) {
      let id = row.id;
      for (let i of this.tableData) {
        if (i.id == id) {
          i.showIcons = true;
        }
      }
    },
  },
  data() {
    return {
      search: "",
      tableData: [
        {
          id: "001",
          type: "有价代金券",
          startDate: "1630145937",
          endDate: "1632758400",
          showIcons: false,
        },
        {
          id: "002",
          type: "普通优惠券",
          startDate: "1630145937",
          endDate: "1632758400",
          showIcons: false,
        },
      ],
    };
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.card-header {
  width: 100%;
  align-items: center;
}
.card-header p {
  text-align: center;
  font-weight: bold;
  flex: 1;
}
.card-header .el-button {
  margin: 0.5rem;
}
.out {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-page-header {
  width: 100%;
}
.card-header >>> .el-page-header__content {
  flex: 1;
}
.card-header >>> .el-page-header__left {
  align-items: center;
}
.el-card {
  margin-top: 2rem;
}
.table-header {
  display: flex;
}
.table-header .el-button {
  margin-left: 1rem;
}
.icon-group {
  display: flex;
  justify-content: center;
}
.icon {
  display: inline-block;
  margin-right: 1rem;
  transform: scale(1.2);
}
</style>